<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
    <title id="travelNoteTitle"></title>
    <script src="../js/jquery-2.1.4.js" type="text/javascript"></script>
<script src="../js/doT.min.js" type="text/javascript"></script>
</head>

<style type="text/css">
    body {
        width: 100%;
        margin: 0 auto;
        background: #F3F3F3;
        font-family: "Helvetica";
    }
    ul {
    margin-top : -7px;
        margin-left: 15px;
        margin-right: 15px;
        padding: 0px;
      
       
    }
    li {
        list-style: none;
        height: 27px;
        width: 100%;
        border-bottom: 1px solid #ccc;
       background-size:15px 15px;
       padding-left: 0px;
    }
    li  img{
    	height: 15px;
    	height: 15px;
    	margin-top: 8px;
        margin-left: 5px;
    }
    li span{
      font-size: 16px;
      line-height:27px;
    }
    .title {
    font-size: 18px;
    color:#000;
    padding-top: 8px;
     padding-left: 6px;
    }
    .userinfo {
    	height: 55px;
    	
    	
    }
    .userinfo img {
    	height: 37px;
    	width: 37px;
    	float: left;
    	margin-top: 9px;
    	margin-left:9px;
    }
    .userinfo span{
    	font-size: 16px;
    	margin-left:10px;
    	margin-top:0px;
    	   color:#999999;
    }
    .userinfo span.turnRight{
    	margin-right: 15px;
    }
    .turnRight{
    		float: right;
    }
    .content {
        width: 100%;
        height: 100%;
        background: #fff;
        margin-top:10px;
    }
    .content img {
        height: 100%;
        width: 100%;
    }
    .location{
  
         height: 30px;
    	 margin-right: 15px;
    	 margin-left: 15px;
    	 border-top:1px solid #ccc;
    	 
    }
 .location  img{
     height: 15px;
     width: 15px;
     margin-top:7px;
 }
 .postionChange{
 position: relative;
 top:-2px;
 }
 .comment{
 height: 10px;
 width: 10px;
 }
 #date{
    color:#999999;
 }
</style>
<body>

<div id="content"></div>

<script id="images_template" type="text/template">

<div class="userinfo">
    <img alt=""  src="avatar.jpg" id="avatar">

    <div class="title" ><span id="contentTitle" style="    color:#000;"></span></div>
<div style="margin-top:-3px;">
    <span  style="font-size:16px;" id="username"></span>

    <span class="turnRight" id="date" style="font-size:14px;"></span>
</div>
</div>
<ul>
    <li><img src="../images/location.png"><span class="turnRight">{{=it.travelNote.cityName}}</span></li>
    <li><img src="../images/calendar.png"><span class="turnRight">{{=it.travelNote.monthIndex}}月</span></li>
    <li><img src="../images/day.png"><span  class="turnRight">{{=it.travelNote.dayCount}}天</span></li>
    <li><img src="../images/cost.png"><span class="turnRight">{{=it.travelNote.money}}元</span></li>
{{? it.travelNote.tag }}
    <li><img src="" id="tag"><span class="turnRight">{{=it.travelNote.tag}}</span></li>
{{?}}
</ul>
<div>
  {{~it.travelNote.travelNotePhotos : value : index}}
    <div class="content">
<!--高设为自动，宽设为100%-->
        <img src="{{=it.ossUrl}}{{=value.image}}" style="height:auto;width:100%">
        <p style="font-size:16px;margin-left:15px;margin-bottom:20px;margin-right:15px;">{{=value.introduction}}</p>
        <div class="location">
            <img  src="../images/location.png">
            <span style="font-size:15px;" class="postionChange">{{=value.scenicName}}</span>
            <span class="turnRight" style="font-size:10px; margin-top:0px;">{{=buildStar(value.score)}}</span>
        </div>
    </div>
  {{~}}
</div>
</script>
<script type="text/javascript">

	function loadJson(json) {
	
		var tempFn = doT.template($("#images_template").html());
		var resultText = tempFn(json);
		$("#content").html(resultText);
		$("#travelNoteTitle").html(json.travelNote.travelNoteName);
		$("#contentTitle").html(json.travelNote.travelNoteName);
		$("#username").html(json.username);
		$("#avatar").attr("src", json.ossUrl+json.travelNote.userId+".png");
		$("#date").html(json.createTime);
	/**
	设置不同的标签
	*/
	
	var tag=json.travelNote.tag;
	if(tag)
		switch (tag) {
		case "文艺游":
			$("#tag").attr("src", "../images/文艺游-蓝"+".png");
			break;
		case "说走就走":
			$("#tag").attr("src", "../images/说走就走"+".png");
			break;
		case "性价比":
			$("#tag").attr("src", "../images/性价比-蓝"+".png");
			break;
		case "家庭旅游":
			$("#tag").attr("src", "../images/家庭旅游-蓝"+".png");
			break;
		case "奢侈游":
			$("#tag").attr("src", "../images/奢侈游-蓝"+".png");
			break;
		case "海岛度假":
			$("#tag").attr("src", "../images/海岛度假-蓝"+".png");
			break;
		case "学生党":
			$("#tag").attr("src", "../images/学生党-蓝"+".png");
			break;
		case "驴友冒险":
			$("#tag").attr("src", "../images/驴友冒险-蓝"+".png");
			break;
		default:
			break;
		}
		
		
		
	};
	loadJson('{{#json}}');
	function buildStar(count) {
        var star = "<img src='../images/star.png' style='margin-left:2px;' >";
        var unStar = "<img src='../images/star_uncheck.png'  style='margin-left:2px;'>";
        var starCount = count;
        var unStarCount = 5 - count;
        var starHtml = "";
        for(var i = 0; i < starCount; i ++) {
            starHtml += star;
        }
        for(var i = 0; i < unStarCount; i++) {
            starHtml += unStar;
        }
        return starHtml;
    }
</script>
</body>

</html>